<template>
  <div class="radar-chart">
    <div id="radar-chart" style="width: 100%; height: 400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  props: {
    data: {
      type: Object,
      required: true
    }
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chartDom = document.getElementById('radar-chart');
      const myChart = echarts.init(chartDom);

      const indicator = [
        { name: '上课状态', max: 100 },
        { name: '考试情况', max: 100 },
        { name: '学习兴趣', max: 100 },
        { name: '知识点掌握情况', max: 100 },
        { name: '学习成绩', max: 100 }
      ];

      // 将数据转换为0-100的范围
      const convertedData = [
        this.data.classStatus,
        this.data.examSituation,
        this.data.learningInterest === '高' ? 90 : this.data.learningInterest === '中' ? 70 : 50,
        parseFloat(this.data.knowledgeMastery) || 60,
        this.data.academicPerformance
      ];

      const option = {
        tooltip: {},
        radar: {
          indicator: indicator,
          radius: '65%',
          splitNumber: 5,
          splitArea: {
            show: true,
            areaStyle: {
              color: ['rgba(255, 255, 255, 0.8)', 'rgba(255, 255, 255, 0.6)', 'rgba(255, 255, 255, 0.4)'],
            }
          },
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#999'
            }
          }
        },
        series: [{
          type: 'radar',
          data: [{
            value: convertedData,
            name: '学生分析',
            areaStyle: {
              color: 'rgba(255, 159, 0, 0.5)'
            },
            lineStyle: {
              color: '#ff9f00'
            },
            itemStyle: {
              color: '#ff9f00'
            }
          }]
        }]
      };

      myChart.setOption(option);
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    }
  }
};
</script>

<style scoped>
.radar-chart {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 15px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
</style>
